<template>
    <div class="views">
        <h3 class="title">
            <span>流程视图</span>
<!--            <span class="time">数据更新时间:2020/04/10 16:20:30</span>-->
        </h3>

        <div class="wapper">
            <div class="views-tree">
                <div class="tree-container">
                    <el-tree ref="viewTree"
                        :data="treeData"
                        node-key="id"
                        lazy
                        :load="loadNode"
                        :props="defaultProps"
                        @node-click="nodeClick"
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        :default-expanded-keys="expandedKeys"
                    >
                        <span class="custom-tree-node" slot-scope="{ node }">
                            <span>
                                <i :class="node.icon"></i>
                                {{ node.label }}
                                <span
                                        class="red v-lights"
                                        v-if="treeExcep[node.label]"
                                >{{treeExcep[node.label]}}</span>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
            <div class="info">
                <!-- <draggable v-model="todo" @remove="removeHandle" :options="dragOptions">
                    <transition-group tag="div" id="todo" class="item-ul">
                        <div v-for="item in todo" class="drag-list" :key="item.id">{{item.content}}</div>
                    </transition-group>
                </draggable>-->
                <div class="top-menu">
                    <draggable v-model="menuList" @remove="removeHandle" :options="dragOptions">
                        <transition-group tag="div" id="menulist" class="clearFix">
                            <div class="item"
                                :key="index"
                                :class="{'act': mAct == item.seq}"
                                 v-for="(item, index) in menuList"
                                @click="itemClick(item.seq, item.actionid)">
                                <div :class="item.icon"></div>
                                <p class="text">{{item.actionname}}</p>
                                <span v-if="item.seq > 0 && exceptions[item.actionid]" class="nums">{{exceptions[item.actionid]}}</span>
                                <span v-if="item.seq == 0 && treeExcep[item.actionid]" class="nums">{{treeExcep[item.actionid]}}</span>
                            </div>
                        </transition-group>
                    </draggable>
                </div>
                <div class="view-wrapper" v-if="mAct != null">
                    <div class="triangle"></div>
                    <div class="unusual" v-show="mAct == '0'">
                        <!-- 异常中心 -->
                        <v-unusual ref="unusual"></v-unusual>
                    </div>
                    <div class="check" v-show="mAct != '0'">
                        <v-check :chosenItem="chosenItem"></v-check>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import vUnusual from './Unusual.vue';
import vCheck from './Check.vue';
import draggable from 'vuedraggable';
import { get, post } from '@/utils/request.js';

export default {
    data() {
        return {
            treeData: [

            ],
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'isLeaf'
            },
            menuList: [

            ],
            expandedKeys: [],
            firstExpand: true,
            treeExcep: {},
            exceptions: {},
            chosenItem: null,
            mAct: null,
            dragOptions: {
                animation: 120,
                scroll: true,
                group: 'sortlist',
                ghostClass: 'ghost-style'
            },
            todo: [
                {
                    id: 1,
                    content: '开发图表组件'
                },
                {
                    id: 2,
                    content: '开发拖拽组件'
                },
                {
                    id: 3,
                    content: '开发权限测试组件'
                }
            ]
        };
    },
    components: {
        vUnusual,
        vCheck,
        draggable
    },
    methods: {
        nodeClick(data, checked, node) {
            // this.checkedId = data.id;
            let that = this;
            get('/esbview/v-workflow/list/' + data.code, '').then(res => {
                this.menuList = res.list;
                this.mAct = 0;
                that.$refs.unusual.query.scaId = data.code;
            });
            get('/esbview/v-workflow/exceptions/' + data.code, '').then(res => {
                this.exceptions = res.exceptions;
                let total = 0;
                for(let i in this.exceptions){
                    total += this.exceptions[i];
                }
                this.exceptions.total = total;
            });

            // this.$refs.treeForm.setCheckedNodes([data]);
        },
        expandTree(node) {
            this.expandedKeys.push(node.id);
        },
        itemClick(seq, actionid) {
            var that = this;
            that.mAct = seq;
            that.chosenItem = actionid;
        },
        loadNode(node, resolve) {
            let parId = node.level === 0 ? 0 : node.data.id;
            if (node.data.haschildren == 0) {
                return resolve([]);
            }
            if (parId == 0) {
                get('/esbview/v-workflow-tree/exceptions', '').then(res => {
                    this.treeExcep = res.exceptions;
                    if (this.treeExcep == undefined) {
                        this.treeExcep = {};
                    }
                });
            }
            get('/esbview/v-workflow-tree/listNode/' + parId, '').then(res => {
                res.list.forEach(item => {
                    item.isLeaf = (item.haschildren == '0' ? true : false);
                })
                resolve(res.list);
                // 第一次加载页面时，选中第一个非叶子节点
                if (this.firstExpand) {
                    if (res.list != null && res.list.length > 0) {
                        this.expandTree(res.list[0]);
                        this.nodeClick(res.list[0]);
                        this.$refs.viewTree.setCurrentKey(res.list[0].id);
                    } else {
                        this.firstExpand = false;
                    }
                }
            });
        },
        removeHandle(event) {
            console.log(event);
            this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
        }
    }
};
</script>

<style scoped>
.views .title {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d4d4d4;
    font-size: 16px;
    font-weight: bold;
    padding: 0 20px;
    color: #333;
}
.views .time {
    flex: 1;
    text-align: right;
}
.wapper {
    display: flex;
    margin: 20px;
    position: relative;
}
.wapper .views-tree {
    position: absolute;
    top: 0;
    left: 0;
}

.tree-container {
    overflow-y: hidden !important;
    height: 100%;
    width: 180px;
}
/* /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #ed795a;
    border-color: #ed795a;
} */

/* 树形结构节点添加连线 */
.tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
}

.tree /deep/ .el-tree-node__children {
    padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
}

.tree /deep/ .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}
.tree /deep/ .el-tree-node__expand-icon.is-leaf {
    display: none;
}

.tree /deep/ .el-tree-node:before {
    border-left: 1px solid #c7c7c7;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
}

.tree /deep/ .el-tree-node:after {
    border-top: 1px solid #c7c7c7;
    height: 20px;
    top: 12px;
    width: 24px;
}

.wapper .info {
    width: 100%;
    padding-left: 200px;
    box-sizing: border-box;
}
.top-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.top-menu .item {
    padding-top: 13px;
    width: 75px;
    height: 62px;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
    background-color: #f7f9fd;
    cursor: pointer;
    position: relative;
    float: left;
    margin-right: 20px;
}
.top-menu .item .nums {
    position: absolute;
    top: -6px;
    right: -15px;
    border: 1px solid #fff;
    border-radius: 15px;
    color: #fff;
    width: 25px;
    height: 15px;
    line-height: 17px;
    font-size: 12px;
    padding-left: 10px;
    background: url(../../../assets/img/attention-fff.png) 3px 50% no-repeat #ed795a;
    background-size: 13px;
}
.top-menu .item .m1 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m1.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m2 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m2.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m3 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m3.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m4 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m4.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m5 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m5.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m6 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m6.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m7 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m7.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m8 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m8.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item .m9 {
    width: 20px;
    height: 25px;
    margin: 0 auto;
    background: url(../../../assets/img/m9.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .act {
    background-color: #ed795a;
}
.top-menu .item .text {
    margin-top: 12px;
}
.top-menu .act .text {
    color: #fff;
}
.top-menu .item.act .m1 {
    background: url(../../../assets/img/m1-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m2 {
    background: url(../../../assets/img/m2-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m3 {
    background: url(../../../assets/img/m3-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m4 {
    background: url(../../../assets/img/m4-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m5 {
    background: url(../../../assets/img/m5-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m6 {
    background: url(../../../assets/img/m6-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m7 {
    background: url(../../../assets/img/m7-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m8 {
    background: url(../../../assets/img/m8-fff.png) 0 0 no-repeat;
    background-size: contain;
}
.top-menu .item.act .m9 {
    background: url(../../../assets/img/m9-fff.png) 0 0 no-repeat;
    background-size: contain;
}

.view-wrapper {
    border: 1px solid #fce8e3;
    margin-top: 20px;
    position: relative;
}
.view-wrapper .triangle {
    width: 15px;
    height: 9px;
    position: absolute;
    top: -9px;
    left: 30px;
    background: url(../../../assets/img/arrow.png) 0 0 no-repeat #fff;
    background-size: contain;
}
.unusual {
    padding: 20px 10px;
}
.check {
    background-color: #fffdfc;
}
</style>